<template>
  <div>
    <Header :left="true" leftText="返回" title="产品异常处理查询" />
    <div>
      <div style="height: 15erm">
        <Form :style="autoHeight">
          <van-field label="申请处置日期" class="formstyle" placeholder="请选择日期" is-link :value="form.ProductionDate"
            @click="showdate = true" />
          <van-calendar color="#1989fa" v-model="showdate" @confirm="onConfirm" :min-date="minDate" />
          <van-field class="formstyle" v-model="form.pOrderID" name="订单号" label="订单号" placeholder="输入订单号" />
          <van-field class="formstyle" v-model="form.MaterialName" name="产品名称" label="产品名称" placeholder="输入产品名称" />
          <van-field class="formstyle" v-model="form.PlineID" readonly name="生产线"
            @click="showPickerpMachineEquipmentID = true" label="生产线" placeholder="输入生产线" />
          <van-popup v-model="showPickerpMachineEquipmentID" position="bottom">
            <van-picker show-toolbar :columns="searchColumns" @confirm="onConfirmpMachineEquipmentID"
              @cancel="showPickerpMachineEquipmentID = false">
              <template #option="option">
                <div style="display: flex; flex-direction: column; align-items: center">
                  <div>{{ option.pMachineID }}</div>
                </div>
              </template>
              <template #title>
                <van-field v-model="searchKey" placeholder="请输入搜索内容" clearable />
              </template>
            </van-picker>
          </van-popup>
        </Form>
        <div style="margin-top: 10px; margin-bottom: 10px">
          <van-button type="primary" class="buttongroup" @click="getList" color="#138087">查询</van-button>
        </div>
      </div>

      <div class="textScroll">
        <!-- 循环数据开始 -->
        <div v-for="item in itemsOne" :key="item.Id" style="position: relative">
          <div style="width: 100%; background-color: #f3f4f8; height: 5px">
            <span></span>
          </div>
          <div class="divStyle">
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>生产线:</b></van-col>
              <van-col span="14">{{ item.PLineID }}</van-col>
            </van-row>
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>订单号:</b></van-col>
              <van-col span="14">{{ item.POrderID }}</van-col>
            </van-row>
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>产品名称:</b></van-col>
              <van-col span="14">{{ item.MaterialName }}</van-col>
            </van-row>
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>问题批次:</b></van-col>
              <van-col span="14">{{ item.BatchID }}</van-col>
              <van-col span="2">
                <van-button style="
                    width: 85px;
                    height: 40px;
                    font-size: 12px;
                    position: absolute;
                    left: 80%;
                  " type="danger" text="未终审" @click.stop="seeCheckedDetail(item)" />
              </van-col>
            </van-row>

            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>处理数量:</b></van-col>
              <van-col span="14">{{ item.DeFectAmount }}</van-col>
            </van-row>

            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>调机原因:</b></van-col>
              <van-col span="14">{{ item.QProblemID }}{{ item.ManageReasonID }}{{ item.FunctionProblemID }}</van-col>
            </van-row>

            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>发起人:</b></van-col>
              <van-col span="14">{{ item.Creator }}</van-col>
            </van-row>

            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>发起时间:</b></van-col>
              <van-col span="14"><strong>{{ item.CreateDatetime }}</strong></van-col>
            </van-row>
          </div>
          <div>
            <br />
          </div>
        </div>
        <div v-for="item in itemsTwo" :key="item.Id" style="position: relative">
          <div style="width: 100%; background-color: #f3f4f8; height: 5px">
            <span></span>
          </div>
          <div class="divStyle">
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>生产线:</b></van-col>
              <van-col span="20">{{ item.PLineID }}</van-col>
            </van-row>
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>订单号:</b></van-col>
              <van-col span="20">{{ item.POrderID }}</van-col>
            </van-row>
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>产品名称:</b></van-col>
              <van-col span="20">{{ item.MaterialName }}</van-col>
            </van-row>
            <!-- <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>班次:</b></van-col>
                  <van-col span="20">{{ showShiftIDName(item.PShiftID) }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>班组:</b></van-col>
                  <van-col span="20">{{ showTeamIDName(item.TeamID) }}</van-col>

                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>生产日期:</b></van-col>
                  <van-col span="20">{{ item.ProductionDate }}</van-col>
                </van-row> -->

            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>问题批次:</b></van-col>
              <van-col span="18">{{ item.BatchID }}</van-col>
              <van-col span="2">
                <van-button style="
                    width: 85px;
                    height: 40px;
                    font-size: 12px;
                    position: absolute;
                    left: 80%;
                  " type="primary" text="已终审" @click.stop="seeCheckedDetail(item)" />
              </van-col>
            </van-row>

            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>待处理数量:</b></van-col>
              <van-col span="20">{{ item.DeFectAmount }}</van-col>
              <!-- <van-col span="2">
                <van-button
                  color="#138087"
                  @click.stop="seeCheckedDetail(item)"
                  style="
                    width: 85px;
                    height: 40px;
                    font-size: 12px;
                    position: absolute;
                    left: 80%;
                  "
                  type="primary"
                  text="查看详情"
                />
              </van-col> -->
            </van-row>

            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>调机原因:</b></van-col>
              <van-col span="14">{{ item.QProblemID }}{{ item.ManageReasonID }}{{ item.FunctionProblemID }}</van-col>
            </van-row>
            
            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>发起人:</b></van-col>
              <van-col span="20">{{ item.Creator }}</van-col>
            </van-row>

            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="4"><b>发起时间:</b></van-col>
              <van-col span="20">{{ item.CreateDatetime }}</van-col>
            </van-row>

            <van-row style="margin-left: 10px; margin-top: 10px">
              <van-col span="10"><b>最终处理意见:</b></van-col>
              <van-col span="12" style="color: green"><strong>{{
                showDealType(item.FixedDealType)
              }}</strong></van-col>
            </van-row>
          </div>
        </div>
        <div>
          <br />
        </div>
        <!-- 循环数据结束 -->
        <!-- <van-empty v-if="itemsOne == ''" image="search" description="暂无数据" /> -->
      </div>
      <!-- </van-tab> -->
      <!-- 已确认页面 -->
      <!-- <van-tab title="有最终处置结果">
            <div style="height: 15erm">
              <Form :style="autoHeight">
                <van-field
                  label="申请处置日期查询"
                  class="formstyle"
                  placeholder="请选择日期"
                  is-link
                  :value="form.ProductionDate"
                  @click="showdate = true"
                />
                <van-calendar
                  color="#1989fa"
                  v-model="showdate"
                  @confirm="onConfirm"
                  :min-date="minDate"
                />
                <van-field
                  class="formstyle"
                  v-model="form.pOrderID"
                  name="订单号"
                  label="订单号"
                  placeholder="输入订单号"
                />
                <van-field
                  class="formstyle"
                  v-model="form.MaterialName"
                  name="产品名称"
                  label="产品名称"
                  placeholder="输入产品名称"
                />
              </Form>
              <div style="margin-top: 10px; margin-bottom: 10px">
                <van-button
                  type="primary"
                  class="buttongroup"
                  @click="getUncheckedList"
                  color="#138087"
                  >查询</van-button
                >
              </div>
            </div>
          <div class="textScroll">
            <div v-for="item in itemsTwo" :key="item.Id">
              <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                <span></span>
              </div>
              <div class="divStyle">
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>生产线:</b></van-col>
                  <van-col span="20">{{ item.PLineID }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>订单号:</b></van-col>
                  <van-col span="20">{{ item.POrderID }}</van-col>
                </van-row>
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>产品名称:</b></van-col>
                  <van-col span="18">{{ item.MaterialName }}</van-col>
                  <van-col span="2">
                    <van-button
                      color="#138087"
                      @click.stop="seeCheckedDetail(item)"
                      style="
                        width: 85px;
                        height: 40px;
                        font-size: 12px;
                        position: absolute;
                        left: 80%;
                      "
                      type="primary"
                      text="查看详情"
                    />
                  </van-col>
                </van-row>
                
                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>问题批次号:</b></van-col>
                  <van-col span="20">{{ item.BatchID }}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>待处理数量:</b></van-col>
                  <van-col span="20">{{ item.DeFectAmount }}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>发起人:</b></van-col>
                  <van-col span="20">{{ item.Creator }}</van-col>
                </van-row>

                <van-row style="margin-left: 10px; margin-top: 10px">
                  <van-col span="4"><b>发起时间:</b></van-col>
                  <van-col span="20">{{ item.CreateDatetime }}</van-col>
                </van-row>
              </div>
            </div>
          </div>
        </van-tab> -->
      <!-- </van-tabs> -->
    </div>
  </div>
</template>


<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  tab,
  tabs,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { _httpClient } from "@/libs/apisie";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(tabs);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);
Vue.use(tab);

export default {
  name: "ckCheckselect",
  components: {
    tab,
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },

  data() {
    return {
      searchColumns: [],
      searchKey: "",
      showPickerpMachineEquipmentID: false,
      columnsMachineEquipment: [],
      columnsDealType: [],
      minDate: new Date(2023, 0, 1),
      showdate: false,
      itemsOne: [],
      itemsTwo: [],
      form: {
        ProductionDate: "",
        pOrderID: "",
        MaterialName: "",
        PlineID: ""
      },
    };
  },

  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;
    this.getUncheckedList();
    this.getCheckedList();
    this.getDealType();
    this.getMachineEquipment();
  },
  async mounted() { },
  watch: {  //实时监听搜索输入内容
    'searchKey': {
      handler(newVal) {
        let key = String(newVal);
        //alert(key);
        key = key.replace(/\s*/g, "");
        const reg = new RegExp(key, "ig");
        /* 进行筛选，将筛选后的数据放入新的数组中，‘name’键可根据需要搜索的key进行调整 */
        this.searchColumns = this.columnsMachineEquipment.filter(item => item.pMachineID.match(reg) != null);
        //alert(this.searchColumns);
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    uniqueJSON(arr, attrName) {
      let obj = {};
      let result = arr.reduce((previousValue, currentValue) => {
        (obj[currentValue[attrName]] ? "" : (obj[currentValue[attrName]] = true)) && previousValue.push(currentValue);
        return previousValue;
      }, []);
      return result;
    },
    async getMachineEquipment() {
      //alert(_this.item.valueplineid);
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/MachineEquipment/GetList"
        );
        if (res.HttpCode === "200") {
          let machineEquipmenttMap = res.Data.map((item) => ({
            pMachineID: item.PlineID
          }));
          //alert(JSON.stringify(machineEquipmenttMap));
          machineEquipmenttMap = _this.uniqueJSON(machineEquipmenttMap, "pMachineID");
          //alert(JSON.stringify(machineEquipmenttMap));
          _this.columnsMachineEquipment = machineEquipmenttMap;
          _this.searchColumns = machineEquipmenttMap;
          // machineEquipmenttMap.forEach(element => {
          //   if (element.pMachineID == _this.item.valueplineid) {
          //     this.valuepMachineEquipment = element.PlineID;
          //     this.form.MachineID = element.PlineID;
          //   }
          // });
        }
      } catch (e) {
        //Toast.fail(JSON.stringify(e));
      }
    },
    onConfirmpMachineEquipmentID(value, index) {
      this.valuepMachineEquipment =
        this.searchColumns[index].pMachineID;
      this.form.PlineID = this.searchColumns[index].pMachineID;
      this.showPickerpMachineEquipmentID = false;
    },
    showDealType(type) {
      var DealTypeName;
      this.columnsDealType.forEach((item) => {
        if (item.DealTypeID === type) {
          DealTypeName = item.DealTypeName;
        }
      });
      return DealTypeName;
    },
    async getDealType() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/QualityDealType/GetList"
        );
        if (res.HttpCode === "200") {
          let temp = res.Data.map((item) => ({
            DealTypeID: item.DealTypeID,
            DealTypeName: item.DealTypeName,
          }));
          temp.forEach((item) => {
            _this.columnsDealType.push(item);
          });
        }
      } catch (e) {
        //Toast.fail(JSON.stringify(e));
      }
    },
    getList() {
      this.getUncheckedList();
      this.getCheckedList();
    },
    seeDetail(val) {
      let _this = this;
      this.$ac.openWin({
        name: "quality-ckCheck01Item",
        url: "./quality-ckCheck01Item.html",
        pageParam: {
          item: val,
          columnsshift: _this.columnsshift,
          columnsteamId: _this.columnsteamId,
        },
      });
    },
    seeCheckedDetail(val) {
      let _this = this;
      this.$ac.openWin({
        name: "quality-ckCheckedItem",
        url: "./quality-ckCheckedItem.html",
        pageParam: {
          item: val,
        },
      });
    },
    tabChange(name, title) {
      if (name == 0) {
        //查询未确认信息
        this.getUncheckedList();
      } else if (name == 1) {
        //查询已确认信息
        this.getCheckedList();
      }
    },
    //查询未确审核调机数据
    async getUncheckedList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/QualityDefectReview/GetList?EndChecked=false&POrderID=" +
          this.form.pOrderID +
          "&ProductionDate=" +
          this.form.ProductionDate +
          "&MaterialName=" +
          this.form.MaterialName +
          "&PLineID=" +
          this.form.PlineID
        );
        // if (res.Total == 0) {
        //   Toast.clear();
        // } else {
        Toast.clear();
        _this.itemsOne = res.Data;
        _this.itemsOne.forEach((item) => {
          item.FixedDealType = "暂无";
        });
        //}
      } catch (e) {
        //Toast.fail(JSON.stringify(e));
      }
    },
    onConfirm(date) {
      this.showdate = false;
      this.form.ProductionDate = this.formatDate(date);
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    //查询未确审核调机数据
    async getCheckedList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() +
          "/QualityDefectReview/GetList?EndChecked=true&POrderID=" +
          this.form.pOrderID +
          "&ProductionDate=" +
          this.form.ProductionDate +
          "&MaterialName=" +
          this.form.MaterialName +
          "&PLineID=" +
          this.form.PlineID
        );
        // if (res.Total == 0) {
        //   Toast.clear();
        // } else {
        Toast.clear();
        _this.itemsTwo = res.Data;
        //}
      } catch (e) {
        //Toast.fail(JSON.stringify(e));
      }
    },
  },
};
</script>

<style>
body {
  background-color: white;
}

.table-title-class {
  background-color: #304156;
  color: #fff;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.buttongroup {
  float: right;
  width: 30%;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonLeft {
  position: fixed;
  bottom: 8px;
  float: left;
  width: 49%;
}

.formstyle {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.radioteam {
  display: flex;
  align-items: center;
  padding-left: 13px;
  margin-top: 10px;
  margin-left: 34px;
  margin-bottom: 10px;
}

.buttonRight {
  position: fixed;
  bottom: 8px;
  float: right;
  left: 51%;
  width: 49%;
  background-color: #f22028;
  border-color: #f22028;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 43%;
  bottom: 3rem;
  overflow: scroll;
  right: 10px;
  width: 100%;
  z-index: 1;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.mg5 {
  margin-right: 5px;
}

.tag_margin {
  margin: 2px 5px;
}

.card_under {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}

.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}

.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}

.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
</style>
